<template>
	<view>
		
		<view class="page"
			v-if="(detailData.buy_videos)||(detailData.buy_images&&detailData.buy_images.length!=0)||(detailData.logo&&detailData.logo.length!=0)">
			
			<block v-if="releaseType=='goods'">
				<view v-if="is_video==1" class="swiper">
					<u-swiper v-if="detailData.logo&&detailData.logo.length!=0" height="640" :borderRadius="'20'"
						:bgColor="'transparent'" :list="goods" mode="none">
					</u-swiper>
				</view>
			</block>
			<block v-else>
				<view v-if="is_video==1" class="swiper">
					<u-swiper v-if="detailData.buy_images&&detailData.buy_images.length!=0" height="640"
						:borderRadius="'0'" :bgColor="'transparent'" :list="buy_images" mode="none">
					</u-swiper>
				</view>
			</block>
		
			<view v-if="is_video==0"
				style="width: 100%;height: 320px;z-index: 1; margin-top: 0rpx; margin-bottom: 40rpx;">
				<video id="myVideo" :initial-time="0" v-if="detailData.buy_videos&&detailData.buy_videos.length!=0"
					autoplay="true" loop="true" style="width: 100%;z-index: 2; margin-left: 0%; height: 320px;"
					@fullscreenchange="fullscreenchange" @click="playVideo" :controls="isFullScreen"
					:show-progress="isFullScreen" :show-play-btn="isFullScreen" :enable-play-gesture="true"
					@error="videoErrorCallback" object-fit="fill" :src="IMAGE_URL+detailData.buy_videos"
					:poster="IMAGE_URL+detailData.buy_videos + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_640'"
					objectFit="container">
				</video>
			</view>

			<view
				v-if="(detailData.buy_videos)||(detailData.buy_images&&detailData.buy_images.length!=0)||(detailData.logo&&detailData.logo.length!=0)"
				style="width: 30%; height: 20px; line-height: 20px; z-index: 99; position: absolute;top: 270px; text-align: center; margin-top:15rpx;margin-bottom:25rpx; margin-left: 35%;display: flex;">
				<view @click="change_is_video(0)" class="change_video"
					style="border-top-left-radius: 20rpx;border-bottom-left-radius: 20rpx;"
					:class="is_video==0?'video_on':''">{{$t('视频')}}</view>
				<view @click="change_is_video(1)" class="change_video"
					style="border-top-right-radius: 20rpx;border-bottom-right-radius: 20rpx;"
					:class="is_video==1?'video_on':''">{{$t('图片')}}</view>
			</view>

		</view>
		<view v-else style="height: 10rpx;"></view>



	</view>
</template>

<script>
	import Avatar from "@/components/detail/Avatar.vue"
	import {
		IMAGE_URL
	} from '@/config/app'
	import {
		ImageUrl,
		isVideo,
		time,
		createC2CConversation
	} from "@/common/public";
	export default {
		components: {
			Avatar
		},
		props: {
			detailData: {
				type: Object,
				default: {},
			},
			type: {
				type: String | Number,
				default: '1',
			},
			releaseType: {
				type: String | Number,
				default: '',
			}
		},
		data() {
			return {
				IMAGE_URL,
				loading: false,
				lang: getApp().globalData.lang,
				is_video: 0,
				buy_images: [],
				goods: [],
				videoContext: uni.createVideoContext("myVideo"), //视频实例,
				isFullScreen: true,
				show: false
			}
		},
		watch: {
			show(newVal, oldVal) {
				// 监听文本框值的改变
				if (newVal !== oldVal) {
					// 执行需要在文本框值改变时执行的方法
					if (this.show == true) {
						console.log('打开全屏')
						this.videoContext.requestFullScreen({
							direction: 1
						});
					} else {
						this.videoContext.exitFullScreen()
					}
				}
			}
		},
		mounted() {
			if (this.detailData.buy_videos && this.detailData.buy_videos.length != 0) {
				this.is_video = 0
			} else {
				this.is_video = 1
			}
			if (this.detailData.buy_images) {
				var res = []
				this.detailData.buy_images.forEach((item, index) => {
					res.push(IMAGE_URL + item)
				})
				this.buy_images = res
			}

			if (this.detailData.logo) {
				this.goods = [IMAGE_URL + this.detailData.logo]
			}

		},
		methods: {
			ImageUrl,
			isVideo,
			time,
			videoErrorCallback(e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},
			playVideo() {
				let plat = uni.getStorageSync('plat')

				if (plat == 'app') {
					this.show = true
					this.videoContext.requestFullScreen({
						direction: 1
					});
					this.isFullScreen = true;
				}
			},
			fullscreenchange(event) {
				if (!event.detail.fullScreen) {
					this.videoContext.pause()
					this.videoContext.seek(0)
					this.show = false
					plus.screen.lockOrientation('portrait-primary')
				}else{
					plus.screen.lockOrientation('landscape-primary')
				}
			 
			},
			change_is_video(i) {
				this.is_video = i
			},
		}
	}
</script>

<style lang="scss" scoped>
	//轮播图
	.page {
		//background: linear-gradient(to bottom, #fd644f 0%, #f28e26 100%); 
		//height: 650rpx;
	}

	.swiper {
		width: 100%;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 0rpx;
	}

	.video_on {
		background-color: #fff !important;
		color: #000 !important;
	}

	.change_video {
		width: 50%;
		background-color: #000;
		color: #fff;
	}
</style>